<template>
    <base-page bgColor="#FFFFFF">
        <cu-custom slot="header" :isBack="true" bgColor="bg-white">
            <block slot="content">云上行通济</block>
        </cu-custom>
        <view slot="center" class="auto-100">
            <view class="wrapper bg-white">
                <view class="info-wrapper">
                    <view class="name df-cen-rl boder-padding">
                        <view class="item ">收货人</view>
                        <input placeholder="收货人" v-model="name" type="text" class="ipt" />
                    </view>
                    <view class="name df-cen-rl boder-padding">
                        <view class="item ">手机号码</view>
                        <input placeholder="请输入手机号码" v-model="mobile" type="number" maxlength="11" class="ipt" />
                    </view>
                    <view class="name df-cen-rl boder-padding">
                        <view class="item ">所在地区</view>
                        <input placeholder="请输入所在地区" v-model="addressOne" type="text" class="ipt" />
                    </view>
                    <view class="name df-cen-rl boder-padding">
                        <view class="item ">详细地址</view>
                        <input placeholder="街道、门牌号" v-model="address" type="text" class="ipt" />
                    </view>
                </view>
            </view>
            <view class="confirmBtn" @click="submitVote">确定</view>
            <view class="tipTextinfo">地址提交后不可修改</view>
        </view>
    </base-page>
</template>

<script>
import http from '../../common/js/http.js'
export default {
	data() {
		return {
			name: '',
			mobile: '',
			addressOne: '',
			address: ''
		}
	},
	mounted() { },
	methods: {
		submitVote() {
			if (this.name == '') {
				return this.$util.tip('请填写收货人')
			}
			if (!this.$util.regCheckAll.isPhone(this.mobile)) {
				return this.$util.tip('请输入正确手机号码')
			}
			if (this.addressOne == '') {
				return this.$util.tip('请填写所在地区')
			}
			if (this.address == '') {
				return this.$util.tip('请填写详细地址')
			}
			http.sendRequest({
				url: '/turntable/api/turntable/add_address',
				data: {
					address: this.addressOne + ',' + this.address,
					name: this.name,
					mobile: this.mobile
				}
			}).then(res => {
				this.$util.tip('保存成功')
				setTimeout(() => {
					this.$util.back(1)
				}, 800)
			})

		}
	}
}
</script>
<style lang="scss" scoped>
/deep/.ipt {
    .content {
        text-align: left;
    }
}

.confirmBtn {
    width: 580rpx;
    height: 80rpx;
    background: linear-gradient(0deg, #d13520 1%, #fa553f 100%);
    border-radius: 12rpx;
    margin: 0 auto;
    font-size: 32rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #ffffff;
    line-height: 80rpx;
    text-align: center;
}

.delBTn {
    border-bottom: 5px solid #f4f4f4;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #fd3e5a;
}

.checked {
    background-color: #39b54a;
}

.name {
    .ipt {
        flex: 0.7;
        text-align: left;
        font-size: 14px;
    }
}

.wrapper {
    margin-bottom: 50px;
}

.info-wrapper {
    padding: 0 15px;
    font-size: 14px;

    .item {
        flex: 0.3;
        font-size: 14px;
        font-weight: bold;
    }
}

.boder-padding {
    background-color: #fff;
    padding: 15px 0;
    border-bottom: 1px solid #f4f4f4;
}

.default {
    border-bottom: 5px solid #f4f4f4;
    padding: 15px;
    font-size: 14px;
    font-weight: bold;
}

.checked {
    border-radius: 50px;
}

.tipTextinfo {
    padding-top: 40rpx;
    text-align: center;
    font-size: 24rpx;
    color: #ff0000;
}
</style>
